<!DOCTYPE html>
<html lang="zh_cn">
<head>
    <meta charset="UTF-8">
    <title>websocket_test</title>
    <style>
        html, body {
        /*padding: 0;*/
        margin: 0;
        /*user-select: none;*/
        padding: 10px;
    }
    
    label {
        height: 30px;
        display: inline-block;
    }
    
    label span {
        display: inline-block;
        width: 90px;
    }
    
    label input {
        display: inline-block;
        width: 400px;
    }
    
    </style>
</head>
<body>
    <p id="panel"></p>
    <div style="width: 49%;display: inline-block;">
        <label>
            <span>name:</span>
            <input id="name" value="" placeholder="请输入游戏名">
        </label>
        <br/>
        <label>
            <span>account:</span>
            <input id="account" value="" placeholder="请输入账号">
        </label>
        <br/>
        <label>
            <span>password:</span>
            <input id="password" value="" placeholder="请输入密码">
        </label>
        <br/>
        <label>
            <span>roomId:</span>
            <input id="roomId" value="" placeholder="请输入房间id 带-的uuid">
        </label>
        <br/>
        <label>
            <span>message:</span>
            <input id="messageInput" value="" placeholder="请输入消息，直接推送给同房间的所有人（自己除外）">
        </label>
    </div>
    <div style="width: 49%;display: inline-block;">
        <button onclick="connect()">连接</button>
        <button onclick="login()">登录</button>
        <button onclick="siginUp()">注册</button>
        <button onclick="clearPanel()">清空面板</button>
        <hr/>
        <button onclick="createRoom()">创建房间</button>
        <button onclick="listRoom()">获取房间列表</button>
        <button onclick="joinRoom()">加入房间</button>
        <button onclick="leaveRoom()">离开房间</button>
        <hr/>
        <button onclick="gameReady()">准备</button>
        <button onclick="gameUnready()">取消准备</button>
        <button onclick="startGame()">开始游戏</button>
        <button onclick="message()">数据同步</button>
    </div>
    <div id="message"></div>
    <script type="text/javascript" src="action.js"></script>
    <script type="text/javascript">
    const panel = document.getElementById('panel');
    const messagePanel = document.getElementById('message');
	var userId;
        function connect(){
            // const socket=new WebSocket("ws://81.68.160.65:8888");
            const socket=new WebSocket("ws://localhost:8888")
            socket.onopen=()=>{
                panel.innerHTML='';
            }
            // socket.onerror=()=>{
            //     panel.innerHTML = '<span style="color: red;">连接错误</span>';
            // }
            // socket.onclose=()=>{
            //     panel.innerHTML = '<span style="color: red;">连接被关闭</span>';
            // }
            socket.onmessage= e =>{
                const element = document.createElement('p');
                element.innerText = e.data;
                messagePanel.appendChild(element);
                const j=JSON.parse(e.data);

                if(j.requestCode==requestCode.ROOM&&j.actionCode==roomAction.LIST)
                {
                    document.getElementById("roomId").setAttribute("value",j.data[0].id);
                }
				if(j.requestCode==requestCode.ROOM&&j.actionCode==roomAction.CREATE)
				{
		
				    document.getElementById("roomId").setAttribute("value",j.data.roomId);
				}
				if(j.requestCode==requestCode.USER&&j.actionCode==userAction.LOGIN)
                {
					userId=j.data.data.id;
                }



            }
            window.socket = socket;
        }
        // connect();
        function login(){
            let data=new Object();
            data.account=document.getElementById("account").value;
            data.password=document.getElementById("password").value;
            
            sendMessage(requestCode.USER,userAction.LOGIN,data)
            
        }
        function siginUp(){
            let data=new Object();
            data.name=document.getElementById("name").value;
            data.account=document.getElementById("account").value;
            data.password=document.getElementById("password").value;
            
            sendMessage(requestCode.USER,userAction.SIGNUP,data)
            
        }
        function sendMessage(RequestCode  = 0, ActionCode = '', data = {}) 
        {
            window.socket.send(JSON.stringify({RequestCode, ActionCode, data}));
            //console.log(JSON.stringify({RequestCode, ActionCode, data}))
        }

        function clearPanel() {
            messagePanel.innerText = '';
        }

        function createRoom()
        {
            sendMessage(requestCode.ROOM,roomAction.CREATE,{})
        }
        function joinRoom()
        {
            let data=new Object();
            let id=document.getElementById("roomId").value;
            data.id=id;
            sendMessage(requestCode.ROOM,roomAction.JOIN,data)
        }

        function listRoom()
        {
            sendMessage(requestCode.ROOM,roomAction.LIST,{});
        }
        function leaveRoom()
        {
            let data=new Object();
            let id=document.getElementById("roomId").value;
            data.id=id;
            sendMessage(requestCode.ROOM,roomAction.QUIT,data);
        }
	
		function gameReady()
		{
		    let data=new Object();
		    data.id=userId;
		    sendMessage(requestCode.ROOM,roomAction.READY,data);
		}
		function gameUnready(){
			let data=new Object();
			data.id=userId;
			sendMessage(requestCode.ROOM,roomAction.UNREADY,data);
		}
        function startGame()
        {
            let data=new Object();
            let id=document.getElementById("roomId").value;
            data.id=id;
            sendMessage(requestCode.ROOM,roomAction.START,data);
        }
        function message()
        {
            let data=new Object();
            let input=document.getElementById("messageInput").value;
            data.msg=input;
            sendMessage(requestCode.GAME,gameAction.MOVE,data);
        }
        
    </script>
</body>
